/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable @next/next/no-img-element */

import { formatLang } from "@/helpers/post";

import type { TPageOgImage, TPostOgImage } from "@/types";
import type { CSSProperties } from "react";

const styles: Record<string, CSSProperties> = {
  container: {
    backgroundImage:
      "url()",
    backgroundColor: "#ffffff",
    backgroundRepeat: "no-repeat",
    backgroundSize: "1200px 600px",
    backgroundPosition: "top left",
    color: "#0f172a",
    display: "flex",
    flexDirection: "column",
    fontFamily: '"Plus Jakarta Sans"',
    fontWeight: 400,
    height: "100%",
    justifyContent: "center",
    paddingBottom: 104,
    paddingLeft: 132,
    paddingRight: 132,
    position: "relative",
    width: "100%",
  },
  category: {
    color: "#7733ff",
    fontSize: 36,
    fontWeight: 800,
    marginBottom: 8,
    textTransform: "capitalize",
  },
  categoryWork: {
    color: "#3b82f6",
  },
  title: {
    color: "#334155",
    fontSize: 68,
    fontWeight: 800,
    lineHeight: 1.15,
    marginBottom: 28,
  },
  tags: {
    display: "flex",
  },
  tag: {
    alignItems: "center",
    borderRadius: 100,
    backgroundColor: "#dbeafe",
    color: "#2563eb",
    fontSize: 20,
    fontWeight: 800,
    display: "flex",
    height: 48,
    marginRight: 16,
    paddingLeft: 16,
    paddingRight: 20,
  },
  tagHash: {
    color: "#60a5fa",
    marginRight: 4,
  },
  author: {
    alignItems: "center",
    bottom: 64,
    display: "flex",
    left: 132,
    position: "absolute",
    right: 132,
  },
  authorAvatar: {
    borderRadius: "100%",
    marginRight: 16,
  },
  divider: {
    color: "#475569",
    marginLeft: 8,
    marginRight: 8,
    fontSize: 24,
  },
  authorName: {
    color: "#334155",
    display: "flex",
    fontSize: 26,
    fontWeight: 800,
  },
  description: {
    color: "#475569",
    fontSize: 26,
  },
  borderBottom: {
    backgroundColor: "#7733ff",
    bottom: 0,
    height: 12,
    left: 0,
    position: "absolute",
    right: 0,
  },
  borderBottomWork: {
    backgroundColor: "#3b82f6",
  },
};

type PostOgImageProps = TPostOgImage;

export function PostOgImage({
  category = "",
  title = "",
  tags = [],
  date = "",
  lang,
}: PostOgImageProps) {
  return (
    <div style={styles.container}>
      {category && (
        <>
          <div style={styles.category}>{category}</div>
          <div />
        </>
      )}

      {title && (
        <>
          <div style={styles.title}>{title}</div>
          <div />
        </>
      )}

      {tags && Array.isArray(tags) && tags.length > 0 && (
        <>
          <div style={styles.tags}>
            {tags.slice(0, 3).map((tag) => (
              <div style={styles.tag} key={tag}>
                <div style={styles.tagHash}>#</div>
                <div style={styles.tagTitle}>{tag}</div>
              </div>
            ))}
          </div>
          <div />
        </>
      )}

      <div style={styles.author}>
        <img
          width="48"
          height="48"
          src="https://cdn.qladgk.com/images/qlAD.jpg"
          style={styles.authorAvatar}
        />
        <div style={styles.authorName}>@qlAD</div>

        {date && (
          <>
            <div style={styles.divider}>&middot;</div>
            <div style={styles.description}>{date}</div>
          </>
        )}

        {lang && (
          <>
            <div style={styles.divider}>&middot;</div>
            <div style={styles.description}>{formatLang(lang)}</div>
          </>
        )}
      </div>
      <div style={styles.borderBottom} />
    </div>
  );
}

type PageOgImageProps = TPageOgImage;

export function PageOgImage({
  caption = "",
  title = "",
  description = "",
}: PageOgImageProps) {
  return (
    <div style={styles.container}>
      {caption && (
        <>
          <div
            style={
              caption.toLowerCase() === "work"
                ? { ...styles.category, ...styles.categoryWork }
                : styles.category
            }
          >
            {caption}
          </div>
          <div />
        </>
      )}

      {title && (
        <>
          <div style={styles.title}>{title}</div>
          <div />
        </>
      )}

      {description && (
        <>
          <div style={styles.description}>{description}</div>
          <div />
        </>
      )}

      <div style={styles.author}>
        <img
          width="48"
          height="48"
          src="https://cdn.qladgk.com/images/qlAD.jpg"
          style={styles.authorAvatar}
        />
        <div style={styles.authorName}>@qlAD</div>
      </div>
      <div
        style={
          caption.toLowerCase() === "work"
            ? { ...styles.borderBottom, ...styles.borderBottomWork }
            : styles.borderBottom
        }
      />
    </div>
  );
}
